<template>
    <div class="listview">
        <listview-top :playlist="state.playlist"></listview-top>
        <play-list :playlist="state.playlist"></play-list>
    </div>
</template>

<script>
import listviewTop from '@/components/listviewTop.vue'
import playList from '@/components/playlist.vue'
import {getPlaylistDetail} from '@/api/index'
import {onMounted,reactive} from 'vue'
import store from '@/store/index.js'
import {useRoute} from 'vue-router'
import musicList from '@/components/musicList.vue';
export default {
    setup(){
        const route = useRoute()
        let state = reactive({
             playlist:{
                creator:{},
                tracks:[]
            }
        })
        onMounted(async ()=>{
            // console.log(route);
            let id = route.query.id
            let result = await getPlaylistDetail(id)
            state.playlist = result.data.playlist
            // console.log(result); 
            console.log(state.playlist);
            store.commit('setPlaylist',state.playlist.tracks)
        })
        return{
            state
        }
    },
    components:{
        listviewTop,
        playList
    }
}
</script>